<template>
  <el-row :gutter="20">
    <el-col v-for="product in products" :key="product" :span="6">
    <ItemCard
    style="margin: 1em;"
              :title="product.name"
              :supplier="product.productId"
              :image="product.description"
              :productId="product.productId"
            />
    </el-col>
  </el-row>
  
</template>

<script>
import ItemCard from '../components/ItemCard.vue';
import { ref } from '@vue/reactivity'
import axios from 'axios';
import { onMounted } from '@vue/runtime-core';
import router from '../router';
var username=sessionStorage.getItem("username");
import { reactive } from 'vue'
export default {
    name: "products",
    components: {ItemCard},
    setup() {
        const products = ref([])
        const getProducts = () => {
            return axios.get("/product/products").then(res => {
                console.log("mark!!"+res);
                 return res; 
            }).catch(e => {
                return e.res.data;
            })
        }
        const redirect = (productid) => {
            console.log("/item/" + productid);
            router.push({ path: "/item/" + productid });
        }
        onMounted(async () => {
            // await addLog(username,haha.action);
            const resdata = await getProducts();
            console.log(resdata);
            products.value = resdata.data.data;
        })
        return {
            products,
            redirect
        }
    }
};
</script>